<template>
  <Card class="search-table-page"
        dis-hover>
    <p slot="title">角色管理</p>
    <div slot="extra">
      <add class="spteen"
           @getList="getTableData"></add>
      <Poptip confirm
              title="确定删除？"
              @on-ok="okdelete">
        <Button icon="md-trash"
                type="error">删除</Button>
      </Poptip>
    </div>
    <Table border
           :loading="loading"
           :columns="columns"
           :data="tableData"
           no-data-text="暂无数据"
           @on-selection-change="multiSelect"></Table>
    <edit ref="edit"
          @getList="getTableData"></edit>
  </Card>
</template>

<script>
import { getSystemUserTypeList } from '@/api/data'
import { delSystemUserType } from '@/api/user'
import { mapMutations } from 'vuex'
import add from './add/add'
import edit from './edit/edit'

export default {
  name: 'role-manage',
  components: {
    add,
    edit
  },
  data () {
    return {
      exportLoading: false,
      loading: false,
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '角色名称',
          key: 'TypeName'
        },
        {
          title: '操作',
          key: 'handle',
          width: 140,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  'marginRight': '10px'
                },
                on: {
                  click: () => {
                    this.$router.push({
                      path: '/system_manage/role_manage/menu_tree',
                      query: { Id: params.row.Id }
                    })
                  }
                }
              }, '授权'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.$refs.edit.getItem(params.row.Id)
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],
      tableData: [],
      selectedIds: []
    }
  },
  mounted () {
    // this.init()
    this.getTableData()
  },
  methods: {
    ...mapMutations([
      'addTag'
    ]),
    init () {
    },
    // 获取表格数据信息
    getTableData () {
      this.loading = true
      getSystemUserTypeList().then(res => {
        if (res.data.success) {
          this.tableData = res.data.data
          this.loading = false
        } else {
          this.$Message.info(res.data.msg)
          this.loading = true
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 多选
    multiSelect (selection) {
      this.selectedIds = selection.map(item => item.Id)
    },
    okdelete () {
      if (this.selectedIds.length === 0) {
        this.$Message.info('请选择要删除的角色！')
      } else {
        const delData = {
          SysUserId: localStorage.getItem('userId'),
          Ids: this.selectedIds
        }
        delSystemUserType(delData).then(res => {
          if (res.data.success) {
            this.$Message.info(res.data.msg)
          } else {
            this.$Message.info(res.data.msg)
          }
        }).then(() => {
          this.getTableData()
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.search-table-page {
  min-height: 85vh;
}
</style>
